<!DOCTYPE html>
<html lang="en">

	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>打卡数据控制中心-位置信息管理</title>
		<!-- base:css -->
		<link rel="stylesheet" href="/vendors/mdi/css/materialdesignicons.min.css">
		<link rel="stylesheet" href="/vendors/css/vendor.bundle.base.css">
		<!-- endinject -->
		<!-- plugin css for this page -->
		<!-- End plugin css for this page -->
		<!-- inject:css -->
		<link rel="stylesheet" href="/css/style.css">
		<link rel="stylesheet" href="/izitoast/iziToast.min.css" />
		<!-- endinject -->
		<link rel="shortcut icon" href="/images/favicon.png" />
		<style type="text/css">
			.table tr:hover{
				background-color: #2be5f8;
			}
		</style>
	</head>
	<body>
		<div class="container-scroller d-flex" id="home">
			<!-- partial:./partials/_sidebar.html -->
			<nav class="sidebar sidebar-offcanvas">
				<ul class="nav">
					<li class="nav-item sidebar-category">
						<p>导航</p>
						<span></span>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="/">
							<i class="mdi mdi-view-quilt menu-icon"></i>
							<span class="menu-title">总控制台</span>
							<div class="badge badge-info badge-pill">2</div>
						</a>
					</li>
					<li class="nav-item sidebar-category">
						<p>常用功能</p>
						<span></span>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="/home/location">
							<i class="mdi mdi-near-me menu-icon"></i>
							<span class="menu-title">位置管理</span>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="/home/user">
							<i class="mdi mdi-account menu-icon"></i>
							<span class="menu-title">微信用户管理</span>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="docs/documentation.html">
							<i class="mdi mdi-file-document-box-outline menu-icon"></i>
							<span class="menu-title">Documentation</span>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">
							<button class="btn bg-danger btn-sm menu-title">演示</button>
						</a>
					</li>
				</ul>
			</nav>
			<!-- partial -->
			<div class="container-fluid page-body-wrapper">
				<!-- partial:./partials/_navbar.html -->
				<nav class="navbar col-lg-12 col-12 px-0 py-0 py-lg-4 d-flex flex-row" id="navbar">
					<div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
						<button class="navbar-toggler navbar-toggler align-self-center" type="button"
							data-toggle="minimize">
							<span class="mdi mdi-menu"></span>
						</button>
						<div class="navbar-brand-wrapper">
							<a class="navbar-brand brand-logo" href="/"><img src="/images/logo.svg" alt="logo" /></a>
							<a class="navbar-brand brand-logo-mini" href="/"><img src="/images/logo-mini.svg"
									alt="logo" /></a>
						</div>
						<h4 class="font-weight-bold mb-0 d-none d-md-block mt-1">欢迎回来, 管理员</h4>
						<ul class="navbar-nav navbar-nav-right">
							<li class="nav-item">
								<h4 class="mb-0 font-weight-bold d-none d-xl-block">
									{{formatDate(date,this)}}
								</h4>
							</li>
							<li class="nav-item dropdown mr-1">
								<a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
									id="messageDropdown" href="#" data-toggle="dropdown">
									<i class="mdi mdi-calendar mx-0"></i>
									<span class="count bg-info">2</span>
								</a>
								<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list"
									aria-labelledby="messageDropdown">
									<p class="mb-0 font-weight-normal float-left dropdown-header">Messages</p>
									<a class="dropdown-item preview-item">
										<div class="preview-thumbnail">
											<img src="/images/faces/face4.jpg" alt="image" class="profile-pic">
										</div>
										<div class="preview-item-content flex-grow">
											<h6 class="preview-subject ellipsis font-weight-normal">
												David Grey
											</h6>
											<p class="font-weight-light small-text text-muted mb-0">
												The meeting is cancelled
											</p>
										</div>
									</a>
									<a class="dropdown-item preview-item">
										<div class="preview-thumbnail">
											<img src="/images/faces/face2.jpg" alt="image" class="profile-pic">
										</div>
										<div class="preview-item-content flex-grow">
											<h6 class="preview-subject ellipsis font-weight-normal">
												Tim Cook
											</h6>
											<p class="font-weight-light small-text text-muted mb-0">
												New product launch
											</p>
										</div>
									</a>
									<a class="dropdown-item preview-item">
										<div class="preview-thumbnail">
											<img src="/images/faces/face3.jpg" alt="image" class="profile-pic">
										</div>
										<div class="preview-item-content flex-grow">
											<h6 class="preview-subject ellipsis font-weight-normal">
												Johnson
											</h6>
											<p class="font-weight-light small-text text-muted mb-0">
												Upcoming board meeting
											</p>
										</div>
									</a>
								</div>
							</li>
							<li class="nav-item dropdown mr-2">
								<a class="nav-link count-indicator dropdown-toggle d-flex align-items-center justify-content-center"
									id="notificationDropdown" href="#" data-toggle="dropdown">
									<i class="mdi mdi-email-open mx-0"></i>
									<span class="count bg-danger">1</span>
								</a>
								<div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list"
									aria-labelledby="notificationDropdown">
									<p class="mb-0 font-weight-normal float-left dropdown-header">通知</p>
									<a class="dropdown-item preview-item">
										<div class="preview-thumbnail">
											<div class="preview-icon bg-success">
												<i class="mdi mdi-information mx-0"></i>
											</div>
										</div>
										<div class="preview-item-content">
											<h6 class="preview-subject font-weight-normal">Application Error</h6>
											<p class="font-weight-light small-text mb-0 text-muted">
												Just now
											</p>
										</div>
									</a>
									<a class="dropdown-item preview-item">
										<div class="preview-thumbnail">
											<div class="preview-icon bg-warning">
												<i class="mdi mdi-settings mx-0"></i>
											</div>
										</div>
										<div class="preview-item-content">
											<h6 class="preview-subject font-weight-normal">Settings</h6>
											<p class="font-weight-light small-text mb-0 text-muted">
												Private message
											</p>
										</div>
									</a>
									<a class="dropdown-item preview-item">
										<div class="preview-thumbnail">
											<div class="preview-icon bg-info">
												<i class="mdi mdi-account-box mx-0"></i>
											</div>
										</div>
										<div class="preview-item-content">
											<h6 class="preview-subject font-weight-normal">New user registration</h6>
											<p class="font-weight-light small-text mb-0 text-muted">
												2 days ago
											</p>
										</div>
									</a>
								</div>
							</li>
						</ul>
						<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
							data-toggle="offcanvas">
							<span class="mdi mdi-menu"></span>
						</button>
					</div>
					<div class="navbar-menu-wrapper navbar-search-wrapper d-none d-lg-flex align-items-center">
						<ul class="navbar-nav mr-lg-2">
							<li class="nav-item nav-search d-none d-lg-block">
								<div class="input-group">
									<input type="text" class="form-control" placeholder="在这里搜索..." aria-label="search"
										aria-describedby="search">
								</div>
							</li>
						</ul>
						<ul class="navbar-nav navbar-nav-right">
							<li class="nav-item nav-profile dropdown">
								<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
									id="profileDropdown">
									<img src="https://api.ms.nuogit.com/data/user/20210204101710 (5).jpg"
										alt="profile" />
									<span class="nav-profile-name">管理员</span>
								</a>
								<div class="dropdown-menu dropdown-menu-right navbar-dropdown"
									aria-labelledby="profileDropdown">
									<a class="dropdown-item">
										<i class="mdi mdi-settings text-primary"></i>
										设置
									</a>
									<a class="dropdown-item" href="/auth/logout">
										<i class="mdi mdi-logout text-primary"></i>
										注销
									</a>
								</div>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link icon-link">
									<i class="mdi mdi-plus-circle-outline"></i>
								</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link icon-link">
									<i class="mdi mdi-web"></i>
								</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link icon-link">
									<i class="mdi mdi-clock-outline"></i>
								</a>
							</li>
						</ul>
					</div>
				</nav>
				<!-- partial -->
				<div class="main-panel">
					<div class="content-wrapper">
						<div class="card">
							<!-- @*更新窗口启动引信*@ -->
							<button id="editlocation-button" type="button"
							        data-toggle="modal" data-target="#addlocation-modal" style="display: none"></button>
							<div id="addlocation-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"
								style="display: none;">
								<div class="modal-dialog modal-dialog-centered">
									<div class="modal-content">
										<div class="modal-header">
											<h4 class="modal-title"> <i class="fa fa-post"></i> {{operateTitle}} </h4>
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
										</div>
										<!-- @*enctype="multipart/form-data"*@ -->
										<form class="p-2" id="addlocation-form">
											<div class="modal-body p-4">
												<div class="row">
													<div class="col-12">
														<div asp-validation-summary="All" class="text-danger"></div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label">位置名称</label>
															<input class="form-control" id="locationname" v-model="locationDto.locationname"
																placeholder="井冈山">
														</div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label">楼宇名称</label>
															<input class="form-control" v-model="locationDto.building" placeholder="A楼">
														</div>
													</div>
						
												</div>
												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label">排序号</label>
															<input type="number" class="form-control" v-model="locationDto.orderid"
																placeholder="1">
														</div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="control-label">距离上一个点的距离(单位:米)</label>
															<input type="number" class="form-control" v-model="locationDto.lastdistance"
																placeholder="100">
														</div>
													</div>
												</div>
						
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal"
													id="addpost-closebutton">关闭</button>
												<button type="button" class="btn btn-info waves-effect waves-light"
													v-on:click="submitFrom(operateTitle)">提交</button>
											</div>
										</form>
									</div>
								</div>
							</div><!-- /.modal -->
							<!-- @*删除提示窗口启动引信*@ -->
							<button id="del-alert-button" type="button"
							        data-toggle="modal" data-target="#del-alert-modal" style="display: none"></button>
							<!-- @*删除提示*@ -->
							<div id="del-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
							    <div class="modal-dialog modal-sm modal-dialog-centered">
							        <div class="modal-content modal-filled bg-danger">
							            <div class="modal-body p-4">
							                <div class="text-center">
							                    <i class="dripicons-wrong h1 text-white"></i>
							                    <h4 class="mt-2 text-white">确认删除吗？</h4>
							                    <p class="mt-3 text-white">删除这个文章，不删除则单击其他任意地方即可</p>
							                    <button id="delpost-button" v-on:click="deleteLocEnd"
												 type="button" class="btn btn-light my-2" data-dismiss="modal">确认</button>
							                </div>
							            </div>
							        </div><!-- /.modal-content -->
							    </div><!-- /.modal-dialog -->
							</div><!-- /.modal -->
							<div class="card-body">
								<h4 class="card-title">位置列表</h4>
								<!-- @*<p class="card-description">
									Add class <code>.table-striped</code>
								</p>*@ -->
								<div class="" style="">
									<button type="button" class="btn btn-success" data-toggle="modal" data-target="#addlocation-modal"
										style="padding:5px 10px;height:40px;line-height:20px" v-on:click="operateChange('添加位置')">
										<i class="mdi mdi-plus-circle "></i> 添加位置</button>
									<button type="button" class="btn btn-primary" v-on:click="reloadLocations" style="padding:5px 10px;height:40px;line-height:20px">
										<i class="mdi mdi-reload"></i> 刷新数据</button>
								</div>
								<div class="table-responsive">
									<table class="table table-striped text-center">
										<thead>
											<tr>
												<th>
													ID
												</th>
												<th>
													位置名称
												</th>
												<th>
													楼宇名称
												</th>
												<th>
													排序号
												</th>
												<th>
													创建时间
												</th>
												<th>
													距离上一点距离
												</th>
												<th>
													操作
												</th>
											</tr>
										</thead>
										<tbody>
											
											<tr v-for="(location,index) in locations" :key="index">
												<td class="py-1">
													{{location.id}}
												</td>
												<td>
													{{location.locationname}}
												</td>
												<td>
													{{location.building}}
													<!-- <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/aASBQoxCmhU0WEibNuggHXvWnM2KQ2xZeibxKVWLKt9VtbOC3VKK0dFickU1OjYKx2tNgFSslDjTUyzt4Qd2SPI3w/132"
														alt="image" /> -->
													<!-- <div class="progress">
						                              <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
						                            </div> -->
												</td>
												<td>
													{{location.orderid}}
												</td>
												<td>
													{{location.createtime}}
												</td>
												<td>
													{{location.lastdistance+"米"}}
												</td>
												<td>
													<a href="#" v-on:click="editStart(location.id,'更新位置')"><span><i class="mdi mdi-lead-pencil" style="font-size:20px"></i></span></a>
													<a href="#" v-on:click="deleteLoc(location.id)"><span><i class=" mdi mdi-delete" style="font-size:20px"></i></span></a>
												</td>
											</tr>
						
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<!-- content-wrapper ends -->
					<!--             partial:./partials/_footer.html-->
					<footer class="footer">
						<p class="text-center text-sm-left d-block d-sm-inline-block mb-0">Copyright © 2021
							NGIT.All rights reserved.</p>
					</footer>
					<!-- partial -->
				</div>
				<!-- main-panel ends -->
			</div>
			<!-- page-body-wrapper ends -->
		</div>
		<!-- container-scroller -->
		<!--调试环境-->
		<script src="/js/vue.js"></script>
		<!-- base:js -->
		<script src="/vendors/js/vendor.bundle.base.js"></script>
		<script src="/js/axios.min.js"></script>
		<script src="/izitoast/iziToast.min.js"></script>
		<script src="/izitoast/iziToast.init.js"></script>
		<!-- endinject -->
		<!-- inject:js -->
		<script src="/js/template.js"></script>
		<!-- endinject -->
		<!-- End custom js for this page-->
		<script type="text/javascript">
			let jq = $;
			let home = new Vue({
				el: '#home',
				data() {
					return {
						date: new Date(),
						operateTitle: '',
						locationDto: {
							id:'',
							locationname: '',
							building: '',
							orderid: 0,
							lastdistance: 0
						},
						locations: [],
						locationId: ''
					}
				},
				created: function() {
					let that = this;
					this.timer = setInterval(() => {
						that.date = new Date(); //修改日期数据
					}, 1000);
					this.reloadLocations();
				},
				methods: {
					setZero(a) { //设置小于10的数字在加0
						return a < 10 ? "0" + a : a;
					},
					formatDate(date, vm) { //当前时间格式化处理
						let str = "";
						const weekDay = [
							"星期天",
							"星期一",
							"星期二",
							"星期三",
							"星期四",
							"星期五",
							"星期六"
						];
						str += vm.setZero(date.getFullYear()) + "年"; //获取年份
						str += vm.setZero(date.getMonth() + 1) + "月"; //获取月份
						str += vm.setZero(date.getDate()) + "日"; //获取日
						str += " " + weekDay[date.getDay()]; //获取星期
						str += " " + vm.setZero(date.getHours()) + ":"; //获取时
						str += " " + vm.setZero(date.getMinutes()) + ":"; //获取分
						str += vm.setZero(date.getSeconds()); //获取秒
						return str;
					},
					
						say: function(message) {
							successMsg("提示", message, function() {});
						},
						operateChange: function(title) {
							this.operateTitle = title;
							this.clearLocationDto();
						},
						clearLocationDto: function() {
							this.locationDto = {
								locationname: '',
								building: '',
								orderid: 0,
								lastdistance: 0
							};
						},
						submitFrom: function(e) { //更新和添加的通用方法
							let that = this;

							that.locationDto.id = that.locationId;
							console.log(that.locationDto.id);

							if (e == "更新位置") {
								// if(that.locationDto.id=""){
								// 	errorMsg("获取数据失败","正在重新登录!",function () {
								// 		window.location.href="/auth/logout";
								// 	});
								// 	return;
								// }
								axios.put("/api/locations", that.locationDto)
									.then(function(res) {
										console.log(res);
										jq("#addpost-closebutton").click();
										that.clearLocationDto();
										that.reloadLocations();
										successMsg("成功", res.data.message, function() {});
									}).catch(res=>{
										console.log(res);
										errorMsg("失败","添加一个位置失败");
								}	);
								return;
							}
							axios.post("/api/locations", that.locationDto)
								.then(function(res) {
									console.log(res);
									jq("#addpost-closebutton").click();
									that.clearLocationDto();
									that.reloadLocations();
									successMsg("成功", res.data.message, function() {});
								}).catch(res=>{
									console.log(res);
									errorMsg("失败","添加一个位置失败");
								});
						},
						reloadLocations: function() {
							let that = this;
							axios.get("/api/locations")
								.then(function(res) {
									that.locations = [];
									console.log(res);
									let entities = res.data.entities;
									if (entities){
										that.locations = that.locations.concat(entities);
										successMsg("成功", res.data.message, function() {});
										return;
									}
									errorMsg("获取数据失败","正在重新登录!",function () {
										window.location.href="/auth/logout";
									});
								})
								.catch(function(err) {
									console.log(err);
								});
						},
						getLoc: function(id) {
							console.log(id);
							let that = this;
							return new Promise((resolve) => {
								if (id == "undefined" || id == '') {
									idIsNullOrEmptyErrorMsg();
									resolve(false);
								}
								axios.get("/api/locations/" + id)
									.then(res => {
										console.log(res);
										let entity = res.data.entities;
										that.locationId = entity.id;
										that.locationDto = {
											locationname: entity.locationname,
											building: entity.building,
											orderid: entity.orderid,
											lastdistance: entity.lastdistance
										};
										console.log(that.location);
										resolve(res);
									})
									.catch(error => {
										resolve(error)
									});
							});
						},
						editStart: async function(id, title) {
							this.operateChange(title);
							const res = await this.getLoc(id);
							if (!res) {
								return;
							}
							jq("#editlocation-button").click();
						},
						deleteLoc: function(id) {
							let that = this;
							if (id == "undefined" || id == "") {
								idIsNullOrEmptyErrorMsg();
							}
							jq("#del-alert-button").click();
							that.locationId = id;
						},
						deleteLocEnd: function() {
							let that = this;
							if (this.locationId == "undefined" || this.locationId == '') {
								idIsNullOrEmptyErrorMsg();
								return;
							}
							axios
								.delete('/api/locations/' + this.locationId)
								.then(res => {
									resSuccessMsg(res);
									that.reloadLocations();
								})
								.catch(err => {
									errorMsg("错误", "删除一个位置失败!!!");
								});
						},
				},
				destroyed() {
					if (this.timer) {
						clearInterval(this.timer); // 在Vue实例销毁前，清除当前日期定时器
					};
				}
			});
		</script>
	</body>

</html>
